import { FC, memo } from 'react';
import { useNavigate } from 'react-router-dom';

import { Button } from 'antd';

type ExceptionType = '403' | '404' | '500';

interface Props {
	/**
	 * Exception type
	 *
	 * - 403: no permission
	 * - 404: not found
	 * - 500: service error
	 */
	type: ExceptionType;
}
const iconMap: Record<ExceptionType, string> = {
	'403': 'no-permission',
	'404': 'not-found',
	'500': 'service-error'
};
const ExceptionBase: FC<Props> = memo(({ type }) => {
	const navigate = useNavigate();

	const onClick = () => {
		navigate('/');
	};

	return (
		<div className="size-full min-h-520px flex-col-center gap-24px overflow-hidden">
			<div className="flex text-400px text-primary">
				<SvgIcon localIcon={iconMap[type]} />
			</div>
			<Button type="primary" onClick={onClick}>
				返回首页
			</Button>
		</div>
	);
});

export default ExceptionBase;
